<template>
  <div class="Person-head">
    <div class="person_nav">
      <img src="../../assets/images/jiantou_left.png" alt="" class="back-arrow" @click="goback">
      <div class="title">个人头像</div>
      <img src="../../assets/images/线性省略.png" alt="" class="ellipsis-icon" @click="showActionSheet = true">
    </div>
    <div class="avatar-container">
      <img :src="avatarUrl || defaultAvatar" alt="头像" class="avatar">
    </div>
    <van-action-sheet
      v-model:show="showActionSheet"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="onSelectAction"
    />
    <input type="file" ref="fileInput" @change="onFileChange" style="display: none;" />
  </div>
</template>
<script setup lang="ts">
import {ref,reactive,onMounted} from "vue"
import { useRouter } from "vue-router";
import { ActionSheetAction } from 'vant';
import { updateAvatar } from "../../api/Person/index";
import defaultAvatar from '../../assets/images/icon.png';

const router = useRouter();
const avatarUrl = ref(''); // 头像 URL
const showActionSheet = ref(false); // 控制 ActionSheet 显示
const actions = ref<ActionSheetAction[]>([
  { name: '拍照', method: 'takephoto' },
  { name: '从手机相册选择', method: 'selectinphone' },
]);

const fileInput = ref<HTMLInputElement | null>(null);

const storedUser = localStorage.getItem('user');
if (storedUser) {
  const user = JSON.parse(storedUser).user; // 解析用户信息
  avatarUrl.value = user.avatarUrl; // 提取头像 URL
}

// 处理 ActionSheet 选择
const onSelectAction = (action: ActionSheetAction) => {
  if (action.method === 'takephoto') {
    // 处理拍照逻辑
    console.log('拍照');
  } else if (action.method === 'selectinphone') {
    // 处理从手机相册中选择逻辑
    console.log('从手机相册中选择');
    // 触发文件选择
    fileInput.value?.click();
  }
};

// 处理文件选择
const onFileChange = async (event: Event) => {
  const target = event.target as HTMLInputElement;
  if (target.files && target.files.length > 0) {
    const file = target.files[0];
    try {
      const response = await updateAvatar(file);
      console.log('头像更新成功:', response.data);
      // 更新头像 URL
      const newAvatarUrl = response.data.data; // 从服务器返回的 URL
      console.log('newAvatarUrl:', newAvatarUrl);
      avatarUrl.value = newAvatarUrl;
      // 更新本地存储中的用户信息
      const storedUser = localStorage.getItem('user');
      if (storedUser) {
        const user = JSON.parse(storedUser).user;
        user.avatarUrl = newAvatarUrl;
        localStorage.setItem('user', JSON.stringify({ user }));
      }
    } catch (error) {
      console.error('头像更新失败:', error);
    }
  }
};

// 处理取消事件
const onCancel = () => {
  showActionSheet.value = false;
};



// 返回我的页面
const goback = () => {
  router.go(-1);
}
</script>
<style lang="less" scoped>
.person_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 50px; 
}

.back-arrow {
  position: absolute;
  left: 10px; 
  width: 34px; 
  height: 34px; 
  margin-top: 10px;
}

.title {
  font-size: 18px; 
  text-align: center;
  margin-top: 10px;
}

.ellipsis-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 24px;
  height: 24px;
}

.avatar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 120px;
}

.avatar {
  width: 430px;
  height: 430px;
  border-radius: 50%;
}
</style>
